<script setup>
import { ref } from 'vue'

// 随机生成三组，每组五个数字
function randomGroup() {
  return Array.from({ length: 5 }, () => Math.floor(Math.random() * 10000))
}
const result = ref(null)
const inputValue = ref('')

import { CalculateResistorOptions } from '../wailsjs/go/main/App.js'

async function onInput(e) {
  let val = e.target.value.toUpperCase()
  // 只允许数字、点、K、M，且K/M只能在结尾且最多一个
  val = val.replace(/[^0-9.KMkm]/g, '')
  // 只保留第一个小数点
  val = val.replace(/(\..*)\./g, '$1')
  // 只保留结尾的K/M
  val = val.replace(/([KM])(?=.)/g, '')
  // K/M只能出现一次
  val = val.replace(/([KM]).*([KM])/g, '$1')
  inputValue.value = val

  // 调用后端方法并打印结果
  if (val) {
    try {
      const resStr = await CalculateResistorOptions(val)
      // console.log('电阻计算结果:', resStr)
      result.value = JSON.parse(resStr)
    } catch (err) {
      // console.error('调用失败:', err)
      result.value = null
    }
  } else {
    result.value = null
  }
}
</script>

<template>
  <div class="max-h-full flex flex-col bg-gradient-to-b from-slate-100 to-slate-300 overflow-hidden select-none">
    <!-- 顶部大号数字输入 -->
    <div class="flex flex-col items-center justify-center h-1/4">
      <div class="text-2xl font-bold mb-2 text-slate-700">目标电阻值</div>
      <input v-model="inputValue" type="text" placeholder="请输入数字或以K/M结尾"
        class="text-5xl w-full text-center py-4 bg-white rounded shadow focus:outline-none focus:ring-4 ring-blue-300 max-w-xl"
        @input="onInput" />
    </div>
    <!-- 下方三等分区域 -->
    <div class="min-h-145 flex flex-row h-3/5 divide-x divide-slate-200">
      <!-- 单个电阻 -->
      <div class="flex-1 flex flex-col items-center justify-center bg-slate-100">
        <div class="text-xl font-bold mb-2">最接近单个电阻</div>
        <div v-if="result && result.closestSingle">
          <div class="text-2xl py-2 text-slate-700">值: {{ result.closestSingle.value }}</div>
          <div class="text-lg text-slate-500">误差: {{ result.closestSingle.errorPercentage.toFixed(2) }}%</div>
        </div>
        <div v-else class="text-slate-400">无数据</div>
      </div>
      <!-- 串联组合 -->
      <div class="flex-1 flex flex-col items-center justify-center bg-slate-200">
        <div class="text-xl font-bold mb-2">串联组合</div>
        <div v-if="result && result.seriesCombinations">
          <div v-for="(item, i) in result.seriesCombinations" :key="i" class="py-1">
            <div class="text-lg">{{ item.r1 }} + {{ item.r2 }} = {{ item.total }}</div>
            <div class="text-slate-500 text-sm">误差: {{ item.errorPercentage.toFixed(2) }}%</div>
          </div>
        </div>
        <div v-else class="text-slate-400">无数据</div>
      </div>
      <!-- 并联组合 -->
      <div class="flex-1 flex flex-col items-center justify-center bg-slate-100">
        <div class="text-xl font-bold mb-2">并联组合</div>
        <div v-if="result && result.parallelCombinations">
          <div v-for="(item, i) in result.parallelCombinations" :key="i" class="py-1">
            <div class="text-lg">{{ item.r1 }} // {{ item.r2 }} = {{ item.total }}</div>
            <div class="text-slate-500 text-sm">误差: {{ item.errorPercentage.toFixed(2) }}%</div>
          </div>
        </div>
        <div v-else class="text-slate-400">无数据</div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
